<template>
  <el-card v-loading="loading" class="sku">
    <el-table border style="margin-top: 10px" :data="list">
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="名称" width="140" prop="skuName" />
      <el-table-column label="描述" width="140" prop="skuDesc" />
      <el-table-column label="默认图片" width="140" align="center">
        <template v-slot="{ row }">
          <el-image :src="row.skuDefaultImg" style="width: 80px" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" width="120" prop="weight" />
      <el-table-column label="价格(元)" width="120" prop="price" />
      <el-table-column label="操作" align="center">
        <template v-slot="{ row, $index }">
          <el-button
            :type="row.isSale === 1 ? 'success' : 'info'"
            :icon="row.isSale !== 1 ? Top : Bottom"
            size="small"
            @click="isSale(row)"
          ></el-button>
          <el-button type="primary" :icon="Edit" size="small"></el-button>
          <el-button
            type="info"
            :icon="Search"
            size="small"
            @click="toDetails(row.id)"
          ></el-button>
          <el-popconfirm
            :title="`确认是否要删除?`"
            confirm-button-text="确定"
            cancel-button-text="取消"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete" size="small"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      v-model="skuInfoData.drawer"
      direction="rtl"
      :with-header="false"
      size="50%"
    >
      <el-row style="margin-top: 10px">
        <el-col :span="5"> 名称 </el-col>
        <el-col :span="16">{{ skuInfoData.skuInfo?.skuName }}</el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="5"> 描述 </el-col>
        <el-col :span="16">{{ skuInfoData.skuInfo?.skuDesc }} </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="5"> 价格 </el-col>
        <el-col :span="16"> {{ skuInfoData.skuInfo?.price }}</el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="5"> 平台属性 </el-col>
        <el-col :span="16">
          <el-tag
            style="margin-right: 5px"
            type="success"
            v-for="item in skuInfoData.skuInfo?.skuAttrValueList"
            :key="item.id"
            >{{ item.attrName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="5"> 销售属性 </el-col>
        <el-col :span="16">
          <el-tag
            style="margin-right: 5px"
            type="success"
            v-for="item in skuInfoData.skuInfo?.skuSaleAttrValueList"
            :key="item.id"
            >{{ item.saleAttrName }}-{{ item.saleAttrValueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="5"> 商品图片 </el-col>
        <el-col :span="16">
          <el-carousel
            style="width: 400px"
            height="400px"
            class="sku-carousel"
            trigger="click"
          >
            <el-carousel-item
              v-for="item in skuInfoData.skuInfo?.skuImageList"
              :key="item.id"
            >
              <el-image :src="item.imgUrl"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="currentPage"
      v-model:page-size="size"
      :total="total"
      :page-sizes="[10, 20, 30]"
      layout="prev, pager, next ,jumper, ->,sizes,total"
      @current-change="getList"
      @size-change="getList"
    />
  </el-card>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import {
    cancelSaleApi,
    getSkuInfoApi,
    getSkuPageListApi,
    onSaleApi,
  } from "@/api/product/sku";
  import type { SkuListModel, SkuModel } from "@/api/product/model/skuModel";
  import { ElMessage } from "element-plus";
  export default defineComponent({
    name: "Sku",
  });
</script>
<script lang="ts" setup>
  import { ref, onMounted, reactive } from "vue";
  import {
    Plus,
    Delete,
    Edit,
    Search,
    Bottom,
    Top,
  } from "@element-plus/icons-vue";
  const loading = ref(false);
  const currentPage = ref(1);
  const size = ref(10);
  const total = ref(0);
  const list = ref<SkuListModel>([]);
  const getList = async () => {
    loading.value = true;
    const result = await getSkuPageListApi(currentPage.value, size.value);
    list.value = result.records;
    total.value = result.total;
    loading.value = false;
  };
  onMounted(() => {
    getList();
  });
  //点击切换上架下架
  const isSale = async (row: SkuModel) => {
    if (row.isSale === 1) {
      await cancelSaleApi(row.id!);
      ElMessage.success("下架成功！");
    } else {
      await onSaleApi(row.id!);
      ElMessage.success("上架成功！");
    }
    getList();
  };

  //查看详情

  const skuInfoData = reactive<{
    drawer: boolean;
    skuInfo?: SkuModel;
  }>({
    drawer: false,
    skuInfo: undefined,
  });
  const toDetails = async (id: number) => {
    skuInfoData.skuInfo = await getSkuInfoApi(id);
    skuInfoData.drawer = true;
  };
</script>

<style lang="scss" scoped>
  .sku {
    .el-drawer__body {
      .el-col-5 {
        text-align: right;
        font-size: 16px;
        margin-right: 20px;
      }
    }
    :deep(.el-carousel__indicator) {
      button {
        background-color: #888;
      }
      &.is-active {
        button {
          background-color: #444;
        }
      }
    }
  }
</style>
